<template>
	<!-- 首页 -->
	<div>
		<!-- 顶部组件 -->
		<navigationtop></navigationtop>
		<div class="main" >
			<div v-for="(moment, i) in moments" class="moment">
				<!-- 封面 -->
				<div @click="details(moment.id)">
					<img :src="moment.cover" class="cover"  />
				</div>
				<!-- 标题 -->
				<div align="left" @click="details(moment.id)">
					<h1>{{moment.title}}</h1>
				</div>
				<!-- 用户名+点赞数量 -->
				<div class="author" @click="details(moment.id)">
					<van-image round width="1rem" height="1rem" :src="moment.face"/>
					<span>{{moment.nickname}}</span>
				</div>
				<div class="like">
					<van-icon name="like-o" size="1rem" @click="like(i)" />
					<span>{{moment.likesNumber}}</span>
				</div>
			</div>
		</div>
		<!-- 底部导航 -->
		<navigationbot></navigationbot>
	</div>
</template>

<script>
	import navigationbot from "@/components/navigation_bottom.vue"
	import navigationtop from "@/components/navigation_top.vue"
	export default {
		components: {
			navigationbot,
			navigationtop
		},
		data() {
			return {
				moments: []
			};
		},
		methods: {
			like(i) {
				this.axios.post("/api/likes/likeMoment", {
						userinfoId: 1,
						momentId: this.moments[i].id
					})
					.then((res) => {
						if (res.data.code == 200) {
							if (res.data.data == "点赞成功") {
								this.moments[i].likesNumber++;
							} else {
								this.moments[i].likesNumber--;
							}
						}else{
							this.$toast.fail(res.data.msg)
						}
					})
			},
			details(id){
				this.$router.push({path:"/details", query:{id : id}})
			}
		},
		mounted() {
			this.axios.post("/api/moment/type/2", {
					current: 1,
					size: 2
				})
				.then((res) => {
					this.moments = res.data.data;
				})
		}
	}
</script>

<style>
	.main {
		margin-top: 1.25rem;
	}

	.moment {
		width: 50%;
		padding-left: 0.4rem;
		padding-right: 0.4rem;
	}

	.cover {
		width: 100%;
	}

	.author {
		float: left;
	}

	.like {
		float: right;
	}

	span {
		font-size: 1rem;
		line-height: 1rem;
		color: slategray;
	}

	h1 {
		font-size: 15px;
	}
</style>
